<!-- https://blog.csdn.net/Wx001214/article/details/141902796 
 OpenWeather API文档：https://openweathermap.org/current-->
 
<template>
  <div>
    <div class="container">
      <div class="card">
        <h1>天气预报</h1>
        <!-- 输入城市名称的文本框 -->
        <el-input v-model="cityName" placeholder="输入城市名称" />
        <!-- 查询天气的按钮，点击时调用fetchWeatherData函数 -->
        <el-button @click="fetchWeatherData">查询</el-button>
        <!-- 显示天气数据的容器 -->
        <div v-if="weatherData" id="weatherData">
          <p>经度: {{ weatherData.lon }}°、纬度: {{ weatherData.lat }}°</p>
          <p>降水量: {{ weatherData.rain }}mm/h</p>
          <p>能见度: {{ weatherData.visibility }}米</p>
          <p>当前温度: {{ weatherData.temperature }}°C</p>
          <p>湿度: {{ weatherData.humidity }}%</p>
          <p>云量: {{ weatherData.radiation }}%</p>
          <p>风速: {{ weatherData.windSpeed }} m/s</p>
          <p>数据更新时间: {{ weatherUpdateTime }}</p>
          <p>天气状况:{{ weatherData.weather }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      cityName: '', // 存储输入框的值
      weatherData: {}, // 存储天气数据
      weatherUpdateTime: '' // 存储数据更新时间
    };
  },
  methods: {
    fetchWeatherData () {
      const apiKey = '5c9dbef1bf937d326b96a5ff0d86165b'; // OpenWeatherMap API Key
      const city = this.cityName.trim(); // 获取输入框的值并去除空格
      if (!city) {
        alert('请输入城市名称！');
        return;
      }
      const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;

      fetch(apiUrl)
        .then(response => response.json())
        .then(data => {
          this.weatherData = {
            lon: data.coord ? data.coord.lon : '--',
            lat: data.coord ? data.coord.lat : '--',
            visibility: data.visibility ? data.visibility : '--',
            rain: data.rain ? data.rain['1h'] : '--', // 注意这里的键名是 '1h'
            radiation: data.clouds ? data.clouds.all : '--',
            temperature: data.main ? data.main.temp : '--',
            humidity: data.main ? data.main.humidity : '--',
            windSpeed: data.wind ? data.wind : '--',
            weather: data.weather[0] ? data.weather[0].main && data.weather[0].description : '--',//天气状况
            /* data.weather获取的数据格式：[ { "id": 803, "main": "Clouds", "description": "broken clouds", "icon": "04d" } ]
            如果要访问main,需要通过data.weather[0].main来访问，不能直接访问data.weather.main，会返回无定义*/
          };
          this.weatherUpdateTime = new Date().toLocaleString();
          //console.log('气象数据', this.weatherData);
        })
        .catch(error => {
          console.error('获取气象数据失败', error);
          alert('获取天气数据失败，请检查城市名称或网络连接。');
        });
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.card {
  background-color: rgba(0, 0, 0, 0.8); /* 黑色透明背景 */
  color: white; /* 文字颜色为白色 */
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  max-width: 400px;
  width: 100%;
  text-align: center;
}

.card h1 {
  font-size: 24px;
  margin-bottom: 20px;
  color: white; /* 标题颜色为白色 */
}

.card p {
  margin: 10px 0;
  font-size: 16px;
  color: white; /* 段落颜色为白色 */
}

.card .el-input {
  margin-bottom: 10px;
  width: 100%;
}

.card .el-input input {
  background-color: rgba(255, 255, 255, 0.5); /* 输入框背景颜色为半透明白色 */
  border: 1px solid rgba(255, 255, 255, 0.5); /* 输入框边框颜色为半透明白色 */
  color: white; /* 输入框文字颜色为白色 */
}

.card .el-button {
  width: 100%;
  background-color: rgba(0, 128, 0, 0.8); /* 按钮背景颜色为绿色透明 */
  color: white; /* 按钮文字颜色为白色 */
  border: none;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.card .el-button:hover {
  background-color: rgba(0, 100, 0, 0.8); /* 按钮悬停时的背景颜色 */
}
</style>